<template>
  <div>
    <div class="comment">
      <h2>评论</h2>
      <div class="comment-msg">
        <div class="comment-img">
          <img :src="attachImageUrl(avator)">
        </div>
        <el-input class="comment-input" type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea">
        </el-input>
      </div>
      <el-button type="primary" class="sub-btn" @click="postComment">评论</el-button>
    </div>
    <p>精彩评论：共{{commentList.length}}条评论</p>
    <ul class="popular" v-for="(item,index) in commentList" :key="index">
      <li>
        <div class="popular-img">
          <img :src="attachImageUrl(userPic[index])">
        </div>
        <div class="popular-msg">
          <ul>
            <li class="name">{{userName[index]}}&nbsp;&nbsp;&nbsp;&nbsp;{{item.create_time}}</li>
            <li class="content">{{item.content}}</li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  import {
    mixin
  } from '../mixins';
  import {
    mapGetters
  } from 'vuex';

  export default {
    name: 'comment',
    mixins: [mixin],
    props: [
      'playId', //歌曲或歌单id
      'type' //0歌曲、1歌单
    ],
    computed: {
      ...mapGetters([
        'id', //歌曲或歌单id
        'loginIn', //用户是否已登录
        'userId', //当前登录用户id
        'avator', //当前登录用户头像
      ])
    },
    data() {
      return {
        comment:{
          user_id:'',
          type:'1',
          song_list_id:'',
          content:'',
        },
        textarea: '', //存放输入的评论内容
        commentList: [], //存放评论列表
        userPic: [], //用户的头像
        userName: [], //用户的昵称
      }
    },
    mounted() {
      this.getComment();
    },
    methods: {
      //提交评论
      postComment() {
        const _this = this;
        if (this.loginIn) {
          _this.comment.user_id = this.userId;
          _this.comment.song_list_id = _this.$route.query.id;
          _this.comment.content = this.textarea;
          this.postRequest("/comment/add", _this.comment).then((res) => {
            if (res.data.code == 1) {
              _this.getComment();
              _this.$notify({
                title: "评论成功",
                type: "success",
              });
            } else {
              _this.$notify({
                title: res.data.msg,
                type: "error",
              });
            }
          })

        } else {
          this.rank = null;
          _this.$notify({
            title: '请先登录',
            type: "error",
          });
        }
      },
      //评论列表
      getComment() {
        const _this = this;
        var song_list_id = _this.$route.query.id;
        this.getRequest("/comment/commentOfSongListId?song_list_id=" + song_list_id).then((res) => {
            _this.commentList = res.data;
            for (let item of res.data) {
              this.getUsers(item.user_id);
            }
          })
          .catch(err => {
            _this.$notify({
              title: '评论加载失败',
              type: "error",
            });
          })
      },
      // //获取用户的头像和昵称
      getUsers(id) {
        this.getRequest("/user/detail?id=" + id).then((res) => {
            this.userPic.push(res.data.avator);
            this.userName.push(res.data.username);
          })
          .catch(err => {
            _this.$notify({
              title: '出错了',
              type: "error",
            });
          })
      },

    }
  }
</script>
<style scoped>
  /*评论*/
  .comment .sub-btn {
    margin-top: 10px;
    margin-left: 90%;
  }

  .comment .comment-msg {
    display: flex;
  }

  .comment-msg .comment-input {
    margin-left: 10px;
    flex: 1;
  }

  .comment-msg .comment-img {
    width: 70px;

  }

  .comment-img img {
    width: 100%;
  }

  .comment h2 {
    margin-bottom: 20px;
    text-align: center;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid black;
  }

  /*热门评论*/
  .popular {
    width: 100%;
  }

  .popular li {
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
    padding: 15px 0;
    display: flex;

  }

  .up {
    width: 50px;
    line-height: 60px;
  }

  .popular-msg {
    padding: 0 20px;
    flex: 1;

  }

  .popular-msg li {
    width: 100%;
  }

  .popular-msg .name {
    font-size: 0.6rem;
  }

  .popular-msg .time {
    font-size: 0.6rem;
    color: rgba(0, 0, 0, 0.5);
  }

  .popular-msg .content {
    font-size: 1rem;
  }

  .popular-img {
    width: 50px;

  }

  .popular-img img {
    width: 100%;
  }

  .icon {
    width: 1em;
    height: 1em;
    font-size: 1em;
    color: black;
    fill: currentColor;
    overflow: hidden;
    position: relative;
  }
</style>
